<template>
  <van-swipe class="home-banner" :autoplay="3000" indicator-color="white" width="100%" height="2rem">
    <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" width="100%" height="100%" />
  </van-swipe-item>
  </van-swipe>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
export default {
  data () {
    return {
      images: [
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7948d1f963986b5f9dd240d32d6a0839.jpg?thumb=1&w=720&h=360',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ceb285f512491956f67f83a6d2e821c.jpg?thumb=1&w=720&h=360',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d075c8f62b867bfdd9345f81107841e4.jpg?thumb=1&w=720&h=360'
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.home-banner .van-swipe-item {
    height: 2rem;
    width: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
